<template>
	<view :class="config.style">
		<FullscreenLoading :loading="loading" :config="config"></FullscreenLoading>
		<view class="main-section" v-if="!loading">
			<view class="paper-top" v-if="urlParams.mode == 'exam'">
				<view class="time-show">
					<text>剩余时间：</text>
					<text class="t2">{{timeDown}}</text>
				</view>
				<view class="number">
					<text class="now">{{questionIndex}}</text>
					<text>/</text>
					<text class="total">{{questionTotal}}</text>
				</view>
				<view class="submit">
					<button type="button" class="mui-btn paper-btn-submit" @click="submitPaper(true)">
						交卷
					</button>
				</view>
			</view>
			<swiper class="swiper" v-if="!loading" :style="{height:swiperHeight+'px'}" @change="changeSwiper" :current="currentIndex">
				<swiper-item class="swiper-item" v-for="(item,index) in questionsList" :key="index">
					<view class="item" :id="'swiper_item_' + index">
						<view class="test-con">
							<view class="type">
								<text class="type-str">{{item.question.type_str}}</text>
							</view>
							<view class="question">
								<text class="index">{{item.index}}</text>
								<text class="point">.</text>
								<text class="con">{{item.question.question}}</text>
							</view>
							<view class="question-img">
								<view class="img-item" v-for="(img,img_index) in item.question.question_img_format" :key="img_index">
									<image mode="widthFix" :src="img.format" @error="imageError" class="q-img"></image>
								</view>
							</view>
							<view class="options">
								<template v-if="item.question.type == 1">
									<view class="option" 
									:class="[
										userAnswer[index].answer == opt.option?'active':'',
										item.show_answer == 1 && item.question.answer == opt.option?'active':'',
										item.show_answer == 1 && item.question.answer != opt.option && userAnswer[index].answer == opt.option?'error':'',
									]" 
									v-for="(opt,opt_index) in item.question.options" :key="opt_index" 
									@click="setAnswer(index,opt.option)"
									>
										<text class="letter">
											{{opt.option}}
										</text>
										<text class="point">.</text>
										<text class="description">
											{{opt.description}}
										</text>
									</view>
								</template>
								
								<template v-if="item.question.type==2">
									<view class="option"
									:class="[
										userAnswer[index].answer.includes(opt.option)?'active':'', 
										item.show_answer == 1 && item.question.answer.includes(opt.option)?'active':'',
										item.show_answer == 1 && !item.question.answer.includes(opt.option) && userAnswer[index].answer.includes(opt.option)?'error':''
									]"
									v-for="(opt,opt_index) in item.question.options" 
									:key="opt_index" 
									@click="setAnswer(index,opt.option)" 
									>
										<text class="letter">
											{{opt.option}}
										</text>
										<text class="point">.</text>
										<text class="description">
											{{opt.description}}
										</text>
									</view>
								</template>
								
								<template v-if="item.question.type==3">
									<view class="option" :class="[
										userAnswer[index].answer == 'right'?'active':'',
										item.show_answer == 1 && item.question.answer == 1?'active':'',
										item.show_answer == 1 && item.question.answer != 1 && userAnswer[index].answer === 'right'?'error':'',
									]" @click="setAnswer(index,'right')">
										<text class="description" >
											正确
										</text>
									</view>
									<view class="option" :class="[
										userAnswer[index].answer === 'wrong'?'active':'',
										item.show_answer == 1 && item.question.answer == 0?'active':'',
										item.show_answer == 1 && item.question.answer != 0 && userAnswer[index].answer === 'wrong'?'error':'',
									]" @click="setAnswer(index,'wrong')">
										<text class="description">
											错误
										</text>
									</view>
								</template>
							</view>
						</view>
						
						<view class="answer-con" v-if="urlParams.mode == 'test'">
							<view class="show-answer" :class="item.show_answer == 1?'hidden':'show'">
								<button type="default" size="mini" plain="true" class="btn-show-answer" hover-class="" @click="showAnswer(index)">确认并查看答案</button>
							</view>
							<view class="answer-section" :class="item.show_answer == 1?'show':'hidden'">
								<view class="answer">
									<text class="title">正确答案</text>
									<template v-if="item.question.type == 3">
										<text class="value" v-if="item.question.answer==1">正确</text>
										<text class="value" v-if="item.question.answer==0">错误</text>
									</template>
									<template v-else>
										<text class="value">{{item.question.answer}}</text>
									</template>
								</view>
								<view class="explain" v-if="item.question.exp">
									<view class="title">
										试题解析
									</view>
									<view class="content">
										<rich-text :nodes="item.question.exp"></rich-text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
			
			<view class="paper-footer">
				<view class="items">
					<view class="item prev" @click="prevQuestion()">
						<view class="btn" :class="questionIndex==1?'disabled':''">
							上一题
						</view>
					</view>
					<view class="item number" @click="openQuestionsIndex()">
						<text class="now">{{questionIndex}}</text>/<text class="total">{{questionTotal}}</text>
					</view>
					<view class="item next" @click="nextQuestion()">
						<view class="btn" :class="questionIndex == questionTotal?'disabled':''">
							下一题
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 试卷答题卡 -->
		<uni-popup ref="QuestionsIndex" type="bottom">
			<view class="exam-paper-index-section">
				<view class="section">
					<view class="title">答题卡</view>
					<scroll-view scroll-y="true" class="scroll-Y">
						<view class="lists-section">
							<view class="index" v-for="(item,index) in userAnswer" :key="index" :class="item.answer?'active':''" @click="questionsInex(index)">
								<text>{{index + 1}}</text>
							</view>			
						</view>
					</scroll-view>
				</view>
				<view class="cannel" >
					<button @click="cancleQuestionsIndex()">关闭</button>
				</view>
			</view>
		</uni-popup>
		
		<!--重复考试弹出提示-->
		<uni-popup ref="ReExam" type="center" class="re-exam-popover" :mask-click="false">
			<view class="submit-section">
				<view class="title">提示</view>
				<view class="description">
					您参加过该场考试，是否重新考试
				</view>
				
				<view class="query">
					<button type="default" class="back-btn" @click="backPaperDetail()">
						返回
					</button>
					<button type="default" class="query-btn" @click="startExam()">
						重新考试
					</button>
				</view>
			</view>
		</uni-popup>
		
		<!--交卷成功弹出提示-->
		<uni-popup ref="SubmitPaper" type="center" class="submit-popover" :mask-click="false">
			<view class="submit-section" :class="examResult.pass>examResult.score?'no-pass':'yes-pass'">
				<view class="title">交卷成功</view>
				<view class="description">
					{{examResult.tip}}
				</view>
				<view class="score">
					<text class="value">{{examResult.score}}</text>
					<text class="fen">分</text>
				</view>
				<view class="query">
					<button type="default" class="query-btn" hover-class="query-btn-hover" @click="backPaperDetail()">
						确 认
					</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import { mapState,mapMutations } from 'vuex'
	//全屏加载中
	import FullscreenLoading from '@/components/muu-fullscreen-loading/muu-fullscreen-loading.vue'
	import Top from '../../common/top.vue'
	
	export default {
		components: {
			FullscreenLoading,
			Top,
		},
		data() {
			return {
				loading: true, //加载中
				urlParams: {},
				userInfo : {}, //用户数据
				data: {}, // 试卷数据
				questionsList: [], //试题列表
				currentIndex: 0, //当前swiper索引
				questionIndex: 1, //当前题目索引
				questionTotal: 0, //题目总数
				swiperHeight: 700, //当前swiper高度
				userAnswer: [], //用户答案
				timeDown: '00:00:00', //倒计时字符型显示
				totalUseTime: 0, //用户考试总用时，单位：秒
				examResult: {}, //考试结果
			}
		},
		async onLoad(option) {
			await this.$onLaunched;

			let that = this
			this.urlParams = option
			//通过小程序码进入的获取参数
			if(option.scene){
				// options 中的 scene 需要使用 decodeURIComponent 才能获取到生成二维码时传入的 scene
				let scene = decodeURIComponent(option.scene); 
				let obj = {};
				for (var i = 0; i < scene.split('*').length;i++){
				  var arr = scene.split('*')[i].split('/');
				  obj[arr[0]] = arr[1];
				}
			
				this.urlParams.id = obj.id
				this.urlParams.promoter_uid = obj.u
				//console.log(this.urlParams,'scene')
			}
			
			//加载完成
			await this.getQuestionsList()
			await this.getData()
			await this.createUserAnswer()
			await this.setSwiperHeight()
			if(this.urlParams.mode == 'exam'){
				this.checkReExam()
			}
			//动态设置swiper的高度
			this.$nextTick(() => {
				this.setSwiperHeight();
				// 心跳
				setInterval(function () {
					//获取数据
					let data = {}
						data.action = 'uid'
					let url = '';
						//#ifdef MP-WEIXIN
						url = 'entry/wxapp/exam'
						data.m = 'muu_classroom'
						//#endif
						//#ifdef H5
						url = 'entry/site/paper'
						data.m = 'muu_classroom_plugin_exam'
						//#endif
					that.util.request({
						url : url,
						data : data,
						success: function (res) {}
					})
				}, 1000 * 60)
			});
			this.loading = false
			
			
		},
		created() {
			
			//获取已登录用户数据
			this.getUserInfo()

		},
		onShow() {
			
		},
		computed: {
			...mapState(['config'])
		},
		methods: {

			/**
			 * 获取课程详情数据
			 */
			getData: function(){
				let that = this
				return new Promise((resolve, reject) => {
					let params = this.urlParams
					let data = {}
						data.action = 'detail'
						data.id = params.id
						if(params.hasOwnProperty("promoter_uid") && params.promoter_uid !== undefined){
							data.promoter_uid = params.promoter_uid
						}
					//获取数据
					let url = '';
						//#ifdef MP-WEIXIN
						url = 'entry/wxapp/exam'
						data.m = 'muu_classroom'
						//#endif
						//#ifdef H5
						url = 'entry/site/paper'
						data.m = 'muu_classroom_plugin_exam'
						//#endif
					this.util.request({
						url : url,
						data : data,
						success: function (res) {
							if (res.data.code == 200) {
								that.data = res.data.data
								that.questionTotal = res.data.data.total_count
								uni.setNavigationBarTitle({
								　　title:res.data.data.title
								})
							}
							resolve(res.data)
						}
					})
				})
			},
			
			/**
			 * 获取试题列表数据
			 */
			getQuestionsList: function(){
				let that = this
				return new Promise((resolve, reject) => {
					let params = this.urlParams
					let data = {}
						data.action = 'test'
						data.mode = params.mode
						data.paper_id = params.id
						if(params.hasOwnProperty("promoter_uid") && params.promoter_uid !== undefined){
							data.promoter_uid = params.promoter_uid
						}
					//获取数据
					let url = '';
						//#ifdef MP-WEIXIN
						url = 'entry/wxapp/exam'
						data.m = 'muu_classroom'
						//#endif
						//#ifdef H5
						url = 'entry/site/paper'
						data.m = 'muu_classroom_plugin_exam'
						//#endif
					this.util.request({
						url : url,
						data : data,
						success: function (res) {
							if (res.data.code == 200) {
								that.questionsList = res.data.data
								that.questionTotal = res.data.data.length
							}
							resolve(res.data)
						}
					})
				})
			},
			
			/**
			 * 检查用户是否重复考试
			 */
			checkReExam(){
				let that = this
				let data = {}
					data.paper_id = that.data.id
				//提交数据
				let url = ''
					//#ifdef MP-WEIXIN
					url = 'entry/wxapp/exam'
					data.m = 'muu_classroom'
					data.action = 'retest'
					//#endif
					//#ifdef H5
					url = 'entry/site/paper'
					data.m = 'muu_classroom_plugin_exam'
					data.action = 'retest'
					//#endif
				that.util.request({
					url : url,
					data: data,
					method: 'POST',
					
					success: function (res) {
						//console.log(res.data);
						if (res.data.code == 200) {
							//开始考试
							that.startExam()
						}else{
							//弹出提示，是否重考
							that.$refs.ReExam.open()
						}
					}
				})
			},
			
			/**
			 * 开始考试
			 */
			startExam(){
				//开始执行倒计时
				this.timeDownFn(this.data.exam_time * 60 * 1000)
				
				//关闭提示，是否重考
				this.$refs.ReExam.close()
			},
			
			//手动切换题目
			changeSwiper(e) {
				//console.log(e)
				this.currentIndex = e.detail.current;
				this.questionIndex = this.currentIndex + 1
				//动态设置swiper的高度，使用nextTick延时设置
				this.$nextTick(() => {
					this.setSwiperHeight();
				});
			},
			//答题卡切换试题
			questionsInex(index) {
				this.currentIndex = index;
				this.questionIndex = this.currentIndex + 1
				//动态设置swiper的高度，使用nextTick延时设置
				this.$nextTick(() => {
					this.setSwiperHeight();
				});
			},
			//更新swiper高度
			setSwiperHeight(){
				let that = this
				let element = "#swiper_item_" + this.currentIndex
				//console.log(element)
				let query = uni.createSelectorQuery().in(this)
				query.select(element).boundingClientRect(res => {
					if (res) {
						that.swiperHeight = res.height + 40
						console.log('swiperHeight',that.swiperHeight)
					}
				}).exec()
			},
			
			/**
			 * 上一题
			 */
			prevQuestion(){
				if(this.questionIndex > 1){
					this.currentIndex = this.currentIndex - 1
					this.questionIndex = this.questionIndex - 1
				}
			},
			/**
			 * 下一题
			 */
			nextQuestion(){
				if(this.questionIndex < this.questionTotal){
					this.currentIndex = this.currentIndex + 1
					this.questionIndex = this.questionIndex + 1
				}
			},
			
			/**
			 * 确认并显示正确答案
			 * @param {Object} index
			 */
			showAnswer(index){
				//console.log(index)
				
				//检查是否已答题
				if(!this.userAnswer[index].answer){
					uni.showToast({
					    title: '请先答题',
					    duration: 2000,
						icon: 'none'
					});
					return false;
				}
				//动态添加属性
				this.$set(this.questionsList[index], 'show_answer', 1)
				//设置swiper高度
				this.$nextTick(() => {
					this.setSwiperHeight();
				});
				//提交答题记录
				this.questionSubmit(index)
			},
			
			/**
			 * 练习模式提交答题记录
			 * @param {Object} index
			 */
			questionSubmit(index){
				let that = this
				
				let answer = that.userAnswer[index].answer
				//判断题数据格式需要调整
				if(answer == 'right') answer = 1
				if(answer == 'wrong') answer = 0
				
				let data = {}
					data.paper_id = that.data.id
					data.answer = answer
					data.question_id = that.userAnswer[index].qid //试题ID
				//提交数据
				let url = ''
					//#ifdef MP-WEIXIN
					url = 'entry/wxapp/exam'
					data.m = 'muu_classroom'
					data.action = 'question'
					//#endif
					//#ifdef H5
					url = 'entry/site/paper'
					data.m = 'muu_classroom_plugin_exam'
					data.action = 'question'
					//#endif
				that.util.request({
					url : url,
					data: data,
					method: 'POST',
					
					success: function (res) {
						//console.log(res.data);
						if (res.data.code == 200) {
							
						}else{
							uni.showToast({
							    title: res.data.msg,
							    duration: 2000,
								icon: 'none'
							});
						}
					}
				})
			},
			
			/**
			 * 生成用户答案数组
			 */
			createUserAnswer(){
				let that = this
				this.questionsList.forEach(function(v,k,arr){
					that.$set(that.userAnswer, k, {
						'qid' : Number(v.question.id),
						'answer' : ''
					})
				})
				// console.log(this.userAnswer)
			},
			
			/**
			 * 用户答案
			 * @param {Object} index
			 * @param {Object} answer
			 */
			setAnswer(index,answer){
				let that = this
				
				let this_question = this.questionsList[index]
				//已查看答案的试题无法再次选择
				if(this_question.show_answer == 1){
					return false
				}
				//单选题
				if(this_question.question.type == 1){
					this.$set(this.userAnswer, index, {
						'qid': Number(this_question.question.id),
						'answer' : answer,
					})
				}
				
				//多选题
				if(this_question.question.type == 2){
					let value = {}
					//查询原数据内是否存在
					//console.log(this.userAnswer[index])
					if(this.userAnswer[index] !== undefined && this.userAnswer[index].answer !== undefined){
						let old_answer = this.userAnswer[index].answer
						let old_answer_arr = old_answer.split(',')
						// 查询是否包含该选项并返回索引
						let old_answer_index = old_answer_arr.findIndex((item)=>{
							return item == answer
						})
						//console.log(old_answer_index)
						//存在该值删除该索引值
						if(old_answer_index >= 0){
							old_answer_arr.splice(old_answer_index,1)
						}else{
							old_answer_arr.push(answer)
						}
						old_answer_arr.sort()
						
						let new_answer = old_answer_arr.join(',')
						//移除第一个（,）字符串
						if (new_answer.substr(0,1)==',') new_answer = new_answer.substr(1)
						//console.log(new_answer)
						value = {
							'qid': Number(this_question.question.id),
							'answer' : new_answer,
						}
						
					}else{
						value = {
							'qid': Number(this_question.question.id),
							'answer' : answer,
						}
					}
					//写入数组
					this.$set(this.userAnswer, index, value)
				}
				
				//判断题
				if(this_question.question.type == 3){
					this.$set(this.userAnswer, index, {
						'qid': Number(this_question.question.id),
						'answer' : answer,
					})
				}
				
				//console.log(this.userAnswer)
			},
			
			/**
			 * 交卷
			 */
			submitPaper(showModal = true){
				let that = this
				//显示模态确认框
				if(showModal){
					uni.showModal({
					    title: '提示',
					    content: '是否确认交卷',
					    success: function (res) {
					        if (res.confirm) {
					            console.log('用户点击确定');
								submit()
					        } else if (res.cancel) {
					            console.log('用户点击取消');
								return false
					        }
					    }
					});
				}else{
					submit()
				}
				
				function submit(){
					let data = {}
						data.paper_id = that.data.id
						data.total_time = that.totalUseTime
						//判断题数据格式需要调整
						that.userAnswer.forEach(function(v,k){
							if(v.answer == 'right') v.answer = 1
							if(v.answer == 'wrong') v.answer = 0
						})
						//console.log(that.userAnswer)
						data.answer = JSON.stringify(that.userAnswer);
					//提交数据
					let url = ''
						//#ifdef MP-WEIXIN
						url = 'entry/wxapp/exam'
						data.m = 'muu_classroom'
						data.action = 'submit'
						//#endif
						//#ifdef H5
						url = 'entry/site/paper'
						data.m = 'muu_classroom_plugin_exam'
						data.action = 'submit'
						//#endif
					that.util.request({
						url : url,
						data: data,
						method: 'POST',
						
						success: function (res) {
							//console.log(res.data);
							if (res.data.code == 200) {
								that.examResult = res.data.data
								that.$refs.SubmitPaper.open()
							}else{
								uni.showToast({
								    title: res.data.msg,
								    duration: 2000,
									icon: 'none'
								});
							}
						}
					})
				}
			},
			
			/**
			 * 返回试题详情页
			 */
			backPaperDetail(){
				let pages = getCurrentPages() // 获取栈实例
				let prevPage = pages[pages.length - 2]
				if(prevPage !== undefined){
					uni.navigateBack()
				}else{
					let url = '../../index/index'
					uni.redirectTo({
						url: url
					});
				}
			},
			
			/**
			* 时间倒计时
			*/
			timeDownFn(value) {
				let that = this
				//value = value * 60 * 1000;
				//倒计时的总秒数
				let totalSeconds = parseInt(value / 1000);
				//取模（余数）
				let modulo = totalSeconds % (60 * 60 * 24);
				//小时数
				let hours = Math.floor(modulo / (60 * 60));
					modulo = modulo % (60 * 60);
				//分钟
				let minutes = Math.floor(modulo / 60);
				//秒
				let seconds = modulo % 60;
					hours = hours.toString().length == 1 ? '0' + hours : hours;
					minutes = minutes.toString().length == 1 ? '0' + minutes : minutes;
					seconds = seconds.toString().length == 1 ? '0' + seconds : seconds;
				//输出到页面
				this.timeDown = hours + ":" + minutes + ":" + seconds;
				//延迟一秒执行自己
				if(hours == "00" && minutes == "00" && parseInt(seconds)-1<0){
					console.log('倒计时结束');
					//执行交卷逻辑
					this.submitPaper(false);
				}else{
					setTimeout(function () {
						that.timeDownFn(value-1000);
						//总用时，单位：秒
						that.totalUseTime = that.totalUseTime + 1;
					}, 1000)
				}
			},
			
			/**
			 * 展开答题卡
			 */
			openQuestionsIndex(){
				this.$refs.QuestionsIndex.open()
			},
			
			/**
			 * 关闭
			 */
			cancleQuestionsIndex(){
				this.$refs.QuestionsIndex.close()
			},
			
			/**
			 * 获取已登录用户数据
			 */
			getUserInfo: function(){
				let that = this
				let userInfo = uni.getStorageSync('userInfo') || {}
				this.userInfo = userInfo
			},
		}
	}
</script>

<style lang="scss">
	page {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		background-color: #fff;
		min-height: 100%;
		height: auto;
	}
	.paper-top {
	    display: flex;
	    padding: 10rpx 20rpx;
	    line-height: 60rpx;
	    font-size: 28rpx;
	    color: #03b8cf;
	    background-color: #c4f6fc;
	    .time-show {
			flex: 1;
			text-align: left;
	    }
	    .number {
			flex: 1;
			text-align: right;
			padding: 0 10rpx;
	    }
	    .submit {
			width: 160rpx;
			text-align: right;
			.paper-btn-submit {
				line-height: 20px;
				padding: 5px 10px;
				border: 0;
				font-size: 28rpx;
			}
	    }
	}
	.item {
		padding-bottom: 102rpx;
	}
	.test-con {
		padding: 20rpx;
		background-color:#fff;
		.type {
			display: block;
			.type-str {
				display: inline-block;
				background: #03b8cf;
				line-height: 32rpx;
				padding: 6rpx 10rpx;
				border-radius: 10rpx;
				color: #fff;
			}
		}
		.question {
			font-size:32rpx;color:#363636;
			margin: 20rpx 0;
			.index {
				
			}
			.con {
				font-size: 32rpx;
				line-height: 44rpx;
			}
		}
		.question-img {
			display: flex;
			.img-item {
				flex: 1;
				.q-img {
					width: 100%;
				}
			}
		}
		.options {
			background-color:#fff;
			padding: 30rpx 0 0 0;
			.option {
				position: relative;
				font-size: 28rpx;
				padding: 20rpx;
				line-height: 44rpx;
				background:none repeat scroll 0 0 #f8f8f8;
				border: 2rpx solid #eee;
				margin-top:6rpx;
				list-style: none;
				border-radius: 10rpx;
				cursor:pointer;
				.letter {
					font-size:28rpx;
					font-weight:700;
				}
				.point {
					font-size: 28rpx;
					font-weight:700;
					margin: 0 6rpx;
				}
				.description {
					font-size: 28rpx;
					font-weight:700;
				}
				.error-icon {
					position: absolute;
					width: 20rpx;
					height: 20rpx;
				}
			}
			.active{
				background:#03b8cf;; 
				border:2rpx solid #03b8cf;; 
				color:#fff;
			}
			.error{
				background:#f8f8f8;
				border:2rpx solid #ff3300;
				color:#ff3300;
			}
		}
	}
	
	.answer-con {
		padding: 10px;
		background-color: #fff;
		.hidden {
			display: none;
		}
		.show {
			display: block;
		}
		.show-answer {
			.btn-show-answer {
				line-height: 20px;
				padding: 5px 10px;
				border: 1px solid #eee;
				background-color: #fff;
			}
		}

		.answer {
			margin-top: 10px;
			padding: 5px;
			line-height: 22px;
			color: #03b8cf;
			background-color: #c4f6fc;
			border-radius: 5px;
			.value {
				margin-left: 20rpx;
			}
		}
		.explain {
			
			.title {
				font-size: 15px;
				line-height: 22px;
				color: #03b8cf;
				border-left: 3px solid #03b8cf;
				margin: 10px 0;
				margin-bottom: 20px;
				padding-left: 5px;
			}
			.content {
				color: #666;
				padding-bottom: 112rpx;
			}
		}
	}
	.paper-footer {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		height: 102rpx;
		border-top: 1px solid #f8f8f8;
		background-color: #fff;
		padding-bottom: calc(constant(safe-area-inset-bottom));
		padding-bottom: calc(env(safe-area-inset-bottom));
		z-index: 9;
		.items {
			padding: 10rpx;
			line-height: 80rpx;
			font-size: 28rpx;
			display: flex;
			color: #666;
			.prev {
				flex: 1;
				text-align: center;
				padding: 0 20rpx;
				.btn {
					background-color: #c4f6fc;
					color: #03b8cf;
					margin: 0;
				}
			}
			  
			.next {
				flex: 1;
				text-align: center;
				padding: 0 20rpx;
				.btn {
					background-color: #03b8cf;
					margin: 0;
					color: #fff;
				}
			}
		
			>.item.number {
				width: 120rpx;
				text-align: center;
				background-color: #f8f8f8;
				border-radius: 6px;
				padding-bottom: 0;
			}
		
			.btn {
				padding: 10rpx 0;
				border: 0;
				font-size: 32rpx;
				line-height: 60rpx;
				border-radius: 6rpx;
			}
			.disabled {
				background-color: #eee!important;
				color: #999!important;
			}
		}
	}
	
	/* 答题卡 */
	.exam-paper-index-section {
		background-color: #fff;
		padding: 20rpx;
		border-radius: 10rpx 10rpx 0 0;
		.section {
			padding: 20rpx;
			margin: 10rpx 0;
			text-align: center;
			height: 400rpx;
			
			.title {
				font-size: 36rpx;
				font-weight: 700;
				margin-bottom: 20rpx;
			}
			.scroll-Y {
				height: 400rpx;
				overflow: hidden;
			}
			.lists-section {
				position: relative;
				display: flex;
				flex-wrap: wrap;
				padding-bottom: 20rpx;
				&::after {
					content: ' ';
					flex: 1;
				}
				.index {
					width: 60rpx;
					height: 60rpx;
					line-height: 60rpx;
					text-align: center;
					border: 1rpx solid #ddd;
					font-size: 24rpx;
					margin: 10rpx;
				}
				.index.active {
					color: #fff;
					background-color: $Blue;
					border-color: $Blue;
				}
			}
		}
		.cannel {
			padding: 20rpx 20rpx 0 20rpx;
			text-align: center;
			button {
				color: #999;
				&:after {
					border: 0;
				}
			}
		}
	}
	
	.Blue {
		.paper-top {
			color: $Blue;
			background-color: #c4f6fc;
		}
	
		.swiper-item {
			.test-con {
				.item {
					.type {
						.type-str {
							background: $Blue;
						}
					}
					.options {
						.option.active{
							background: $Blue;
							border:1px solid $Blue;
							color:#fff;
						}
					}
				}
			}
			.answer-con {
				.answer {
					color: $Blue;
					background-color: #c4f6fc;
				}
				.explain {
					.title {
						color: $Blue;
						border-left: 3px solid $Blue;
					}
				}
			}
		}
		.paper-footer {
			.items {
				.prev {
					.btn {
						background-color: #c4f6fc;
						color: $Blue;
					}
				}
				.next {
					.btn {
						background-color: $Blue;
					}
				}
			}
		}
	}
	
	.Green {
		.paper-top  {
			color: $Green;
			background-color: #c3f7e0;
		}
	
		.swiper-item {
			.test-con {
				.item {
					.type {
						.type-str {
							background: $Green;
						}
					}
					.options {
						.option.active {
							background-color:$Green;
							border:2rpx solid $Green;
						}
					}
				}
			}
			.answer-con {
				.answer {
					color: #00ce74;
					background-color: #c3f7e0;
				}
				.explain {
					.title {
					  color: #00ce74;
					  border-left: 6rpx solid #00ce74;
					}
				}
			}
		}
		.paper-footer {
			.items {
				.prev {
					.btn {
						background-color: #c3f7e0;
						color: #00ce74;
					}
				}
				.next {
					.btn {
						background-color: #00ce74;
					}
				}
			}
		}
	}
	
	.LightRed {
		.paper-top  {
			color: #B1331B;
			background-color: #fac6bb;
		}
		.swiper-item {
			.test-con {
				.item {
					.type {
						.type-str {
							background: #B1331B;
						}
					}
					.options {
						.option.active {
							background-color:#B1331B;
							border:1px solid #B1331B;
						}
						.option.error{
							background:#f8f8f8;
							border:1px solid #ff3300;
							color:#ff3300;
						}
					}
				}
			}
			.answer-con {
				.answer {
					color: #B1331B;
					background-color: #fac6bb;
				}
				.explain {
					.title {
						color: #B1331B;
						border-left: 3px solid #B1331B;
					}
				}
			}
		}
		.paper-footer {
			.items {
				.prev {
					.btn {
					  background-color: #fac6bb;
					  color: #B1331B;
					}
				}
				.next {
					.btn {
					  background-color: #B1331B;
					}
				}
			}
		}
	}
	
	.Orange {
		.paper-top  {
			color: #ff6600;
			background-color: #f7ccb0;
		}
		.swiper-item {
			.test-con {
				.item {
					.type {
						.type-str {
							background: #ff6600;
						}
					}
					.options {
						.option.active {
						  background-color:#ff6600;
						  border:2rpx solid #ff6600;
						}
					}
				}
			}
			.answer-con {
				.answer {
					color: #ff6600;
					background-color: #f7ccb0;
				}
				.explain {

					.title {
						color: #ff6600;
						border-left: 6rpx solid #ff6600;
					}
				}
			}
		}
		.paper-footer {
			.items {
				.prev {
					.btn {
						background-color: #f7ccb0;
						color: #ff6600;
					}
				}
				.next {
					.btn {
						background-color: #ff6600;
					}
				}
			}
		}
	}
	
	.LightPink {
		.paper-top  {
			color: #F492A1;
			background-color: #f7ced4;
		}
	
		.swiper-item {
			.test-con {
				.item {
					.type {
						.type-str {
							background: #F492A1;
						}
					}
					.options {
						.option.active {
						  background-color:#F492A1;
						  border:2rpx solid #F492A1;
						}
					}
				}
			}
			.answer-con {
				.answer {
					color: #F492A1;
					background-color: #f7ced4;
				}
				.explain {
					.title {
						color: #F492A1;
						border-left: 3px solid #F492A1;
					}
				}
			}
		}
		
		.paper-footer {
			.items {
				.prev {
					.btn {
						background-color: #f7ced4;
						color: #F492A1;
					}
				}
				.next {
					.btn {
						background-color: #F492A1;
					}
				}
			}
		}
	}
	
	.Magenta {
		.paper-top  {
			color: #6F50A0;
			background-color: #ddcbfc;
		}
		.swiper-item {
			.test-con {
				.item {
					.type {
						.type-str {
							background: #6F50A0;
						}
					}
					.options {
						.option.active {
							background-color:#6F50A0;
							border:2rpx solid #6F50A0;
						}
					}
				}
			}
			.answer-con {
				.answer {
					color: #6F50A0;
					background-color: #ddcbfc;
				}
				.explain {
					.title {
						color: #6F50A0;
						border-left: 6rpx solid #6F50A0;
					}
				}
			}
		}
		.paper-footer {
			.items {
				.prev {
					.btn {
						background-color: #ddcbfc;
						color: #6F50A0;
					}
				}
				.next {
					.btn-next {
						background-color: #6F50A0;
						margin: 0;
					}
				}
			}
		}
	}
	
	
	
	/*交卷成功弹出框*/
	.submit-popover,.re-exam-popover {

		.submit-section {
			width: 500rpx;
			padding: 20rpx;
			background-color: #fff;
			border-radius: 20rpx;
			.title {
				text-align: center;
				padding: 20rpx 0;
			}
			.description {
				padding: 20rpx 0;
				text-align: center;
				color: #777;
			}
			.score {
				padding: 20rpx 0;
				text-align: center;
				.value {
					font-size: 64rpx;
					font-weight: 700;
				}
				.fen {

				}
			}
			.query {
				margin-top: 72rpx;
				button {
					color: #fff;
					border: 0;
				}
				.back-btn {
					color: #777;
					margin-bottom: 20rpx;
					border: 0;
				}
			}
		}
		
		.submit-section.no-pass {
			color: #777;
		}
	}
	
	/*风格样式*/
	.Blue {
		.submit-section {
			.query {
				.query-btn {
					background: $Blue;
				}
			}
		}
		.submit-section.yes-pass {
			color: $Blue;
		}
	}
	.Green {
		.submit-section {
			.query {
				.query-btn {
					background: $Green;
				}
			}
		}
		.submit-section.yes-pass {
			color: $Green;
		}
	}
	.LightRed {
		.submit-section {
			.query {
				.query-btn {
					background: $LightRed;
				}
			}
		}
		.submit-section.yes-pass {
			color: $LightRed;
		}
	}
	.Orange {
		.submit-section {
			.query {
				.query-btn {
					background: $Orange;
				}
			}
		}
		.submit-section.yes-pass {
			color: $Orange;
		}
	}
	.LightPink {
		.submit-section {
			.query {
				.query-btn {
					background: $LightPink;
				}
			}
		}
		.submit-section.yes-pass {
			color: $LightPink;
		}
	}
	.Magenta {
		.submit-section {
			.query {
				.query-btn {
					background: $Magenta;
				}
			}
		}
		.submit-section.yes-pass {
			color: $Magenta;
		}
	}
</style>
